<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大屏</title>

    <script src="lib/jquery-3.2.1.js"></script>
    <script src="plugin/messenger/js/messenger.js"></script>
    <script src="plugin/messenger/js/messenger-theme-flat.js"></script>
    <script src="plugin/bootstrap/js/bootstrap.js"></script>
    <script src="lib/socket.io.js"></script>
    <link rel="stylesheet" href="plugin/messenger/css/messenger.css">
    <link rel="stylesheet" href="plugin/messenger/css/messenger-theme-flat.css">
    <link rel="stylesheet" href="plugin/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="plugin/bootstrap/css/bootstrap-theme.css">
    <link rel="stylesheet" href="css/default.css">
</head>
<body>
<div id="container">

</div>
<script>
    var boot={
      init: function(){
        this.initMessenger();
        this.initWs()
      },
      initMessenger: function(){
        Messenger.options = {
          extraClasses: 'messenger-fixed messenger-on-top',
          theme: 'flat',
          showCloseButton: true

        }
        this.show = (msg,failure) => {
          Messenger().post({
            message: msg,
            type: failure ? 'error':'success',
            showCloseButton: true
          });
        }
      },
      initWs: function(){
        // init socket
        this.socket = io('http://10.0.1.135:3000/fromBIGscreen');
        this.socket.on('connect', ()=>{
          this.show("websocket 建立成功!")
          // process the received
          this.socket.emit("message",'huhai ')
        });
        this.socket.on('disconnect', ()=>{
          this.show('websocket 链接断开!',true)
        });
        this.socket.on('error', ()=>{
          this.show('websocket error!',true)
        });
        this.socket.on('message',  (data)=> {
          console.log('接收到信息: ' +data)
          this.show('接收到信息： '+data)
        });
        this.socket.on('action',  (msg)=> {
          console.log('接收到action: ' +msg)
          doAction(msg)
        });
      }
    }
    boot.init()

    function doAction(action){
      boot.show("接收到指令： "+action)
      switch(action){
        case 'open-pic-1':
          $("#container").html("");
          showPic(1);
          break;
        case 'open-video-1':
          $("#container").html("");
          showVideo(1);
          break;
        case 'open-website-1':
          openWebsite('http://121.42.252.26/dist');
          break;
        default:
          boot.show("当前指令对应的操作函数未实现")
          break;
      }
    }

    function showPic(id){
      let img = document.createElement("img");
        img.setAttribute("src", './medias/images/pic'+id+'.png');
        $("#container").append(img)
    }

    function showVideo(id){
        let videoString = '<video id="video" src="./medias/videos/video'+id+'.mp4" controls="false" autoplay="true">your browser does not support the video tag</video>';
      $("#container").html(videoString)
    }

    function openWebsite(url){
      let iframeURL='<iframe src='+url+' scrolling="no"></iframe>';
      $("#container").html(iframeURL)

    }

</script>
</body>
</html>